<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
    <title>Modern an Admin Panel Category Flat Bootstarp Resposive Website Template | Grids :: w3layouts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Modern Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- Bootstrap Core CSS -->
    <link href="../css/bootstrap.min.css" rel='stylesheet' type='text/css'/>
    <!-- Custom CSS -->
    <link href="../css/style.css" rel='stylesheet' type='text/css'/>
    <link href="../css/font-awesome.css" rel="stylesheet"/>
    <!-- jQuery -->
    <script src="../js/jquery.min.js"></script>
    <!----webfonts--->
    <!--<link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>-->
    <!---//webfonts--->
</head>
<body>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="top1 navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Modern</a>
        </div>
        <!-- /.navbar-header -->
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
                        class="fa fa-comments-o"></i><span class="badge">4</span></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-menu-header">
                        <strong>Messages</strong>
                        <div class="progress thin">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                <span class="sr-only">40% Complete (success)</span>
                            </div>
                        </div>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/1.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                            <span class="label label-info">NEW</span>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/2.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                            <span class="label label-info">NEW</span>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/3.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/4.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/5.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/pic1.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="dropdown-menu-footer text-center">
                        <a href="#">View all messages</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle avatar" data-toggle="dropdown"><img src="../images/1.png"
                                                                                       alt=""/><span
                        class="badge">9</span></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-menu-header text-center">
                        <strong>Account</strong>
                    </li>
                    <li class="m_2"><a href="#"><i class="fa fa-bell-o"></i> Updates <span
                            class="label label-info">42</span></a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-envelope-o"></i> Messages <span
                            class="label label-success">42</span></a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-tasks"></i> Tasks <span
                            class="label label-danger">42</span></a></li>
                    <li><a href="#"><i class="fa fa-comments"></i> Comments <span class="label label-warning">42</span></a>
                    </li>
                    <li class="dropdown-menu-header text-center">
                        <strong>Settings</strong>
                    </li>
                    <li class="m_2"><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-wrench"></i> Settings</a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-usd"></i> Payments <span
                            class="label label-default">42</span></a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-file"></i> Projects <span
                            class="label label-primary">42</span></a></li>
                    <li class="divider"></li>
                    <li class="m_2"><a href="#"><i class="fa fa-shield"></i> Lock Profile</a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-lock"></i> Logout</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-right">
            <input type="text" class="form-control" value="Search..." onFocus="this.value = '';"
                   onBlur="if (this.value == '') {this.value = 'Search...';}">
        </form>
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li>
                        <a href="index.html"><i class="fa fa-dashboard fa-fw nav_icon"></i>仪表板</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-laptop nav_icon"></i>布局<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="grids.html">网格系统</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-indent nav_icon"></i>
                            菜单层次<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="graphs.html">图表</a>
                            </li>
                            <li>
                                <a href="typography.html">排版</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-envelope nav_icon"></i>邮箱<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="inbox.html">收件箱</a>
                            </li>
                            <li>
                                <a href="compose.html">写信</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="widgets.html"><i class="fa fa-flask nav_icon"></i>窗口小部件</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-check-square-o nav_icon"></i>表单<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="forms.html">基本表单</a>
                            </li>
                            <li>
                                <a href="validation.html">验证</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-table nav_icon"></i>表格<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="basic_tables.html">基本表格</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-sitemap fa-fw nav_icon"></i>Css<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="media.html">媒体</a>
                            </li>
                            <li>
                                <a href="login.html">登录</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>
    <div id="page-wrapper">
        <div class="graphs">
            <div class="md">
                <h3>网格</h3>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-12">
                            <input type="text" class="form-control1" placeholder=".col-md-12">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-2 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-2">
                        </div>
                        <div class="col-md-10">
                            <input type="text" class="form-control1" placeholder=".col-md-10">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-3 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-3">
                        </div>
                        <div class="col-md-9">
                            <input type="text" class="form-control1" placeholder=".col-md-9">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-4 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-4">
                        </div>
                        <div class="col-md-8">
                            <input type="text" class="form-control1" placeholder=".col-md-8">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-5 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-5">
                        </div>
                        <div class="col-md-7">
                            <input type="text" class="form-control1" placeholder=".col-md-7">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-6 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-6">
                        </div>
                        <div class="col-md-6">
                            <input type="text" class="form-control1" placeholder=".col-md-6">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-4 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-4">
                        </div>
                        <div class="col-md-4 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-4">
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control1" placeholder=".col-md-4">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-3 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-3">
                        </div>
                        <div class="col-md-6 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-6">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control1" placeholder=".col-md-3">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-2 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-2">
                        </div>
                        <div class="col-md-8 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-8">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control1" placeholder=".col-md-2">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-3 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-3">
                        </div>
                        <div class="col-md-3 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-3">
                        </div>
                        <div class="col-md-3 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-3">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control1" placeholder=".col-md-3">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-5 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-5">
                        </div>
                        <div class="col-md-2 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-2">
                        </div>
                        <div class="col-md-5">
                            <input type="text" class="form-control1" placeholder=".col-md-5">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-group mb-n">
                    <div class="row">
                        <div class="col-md-2 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-2">
                        </div>
                        <div class="col-md-2 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-2">
                        </div>
                        <div class="col-md-2 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-2">
                        </div>
                        <div class="col-md-2 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-2">
                        </div>
                        <div class="col-md-2 grid_box1">
                            <input type="text" class="form-control1" placeholder=".col-md-2">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control1" placeholder=".col-md-2">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="copy_layout">
                <p>Copyright © 2015 Modern. All Rights Reserved | Design by <a href="http://www.mycodes.net/"
                                                                               target="_blank">源码之家</a></p>
            </div>
        </div>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Nav CSS -->
<link href="../css/custom.css" rel="stylesheet">
<!-- Metis Menu Plugin JavaScript -->
<script src="../js/metisMenu.min.js"></script>
<script src="../js/custom.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
